import { indexToLetter } from "@/utils/utils";
import type { ProColumns } from "@ant-design/pro-components";
import {
  EditableProTable,
  ProCard,
  ProFormField,
} from "@ant-design/pro-components";
import { Button, Form } from "antd";
import React, { useState, forwardRef, useImperativeHandle } from "react";
type DataSourceType = {
  id: React.Key;
  // title?: string;
  content?: string;
  option?: string;
  correct?: string;
  // children?: DataSourceType[];
};

export default forwardRef(({ defaultData = [] }, ref) => {
  const [editForm] = Form.useForm();
  const [editableKeys, setEditableRowKeys] = useState<React.Key[]>(() =>
    defaultData.map((item) => item.id)
  );
  const [dataSource, setDataSource] =
    useState<readonly DataSourceType[]>(defaultData);
  const columns: ProColumns<DataSourceType>[] = [
    {
      title: "题目选项",
      readonly:true,
      dataIndex: "option",
      width: '20%',
      formItemProps: {
        rules: [
          {
            required: true,
            whitespace: true,
            message: "此项是必填项",
          },
        ],
      },
    },
    {
      title: "选项内容",
      dataIndex: "content",
      // width: '30%',
      formItemProps: {
        rules: [
          {
            required: true,
            whitespace: true,
            message: "此项是必填项",
          },
          // {
          //     message: '必须包含数字',
          //     pattern: /[0-9]/,
          // },
          // {
          //     max: 16,
          //     whitespace: true,
          //     message: '最长为 16 位',
          // },
          // {
          //     min: 6,
          //     whitespace: true,
          //     message: '最小为 6 位',
          // },
        ],
      },
    },
    {
      title: "正确答案",
      key: "correct",
      dataIndex: "correct",
      valueType: "select",
      formItemProps: {
        rules: [
          {
            required: true,
            whitespace: true,
            message: "此项是必填项",
          },
        ],
      },
      valueEnum: {
        "0": {
          text: "否",
        },
        "1": {
          text: "是",
        },
      },
    },
    {
      title: "操作",
      fixed: "right",
      valueType: "option",
      width: 150,
      render: () => {
        return null;
      },
    },
  ];

  useImperativeHandle(ref, () => ({
    editForm,
    dataSource,
    setDataSource,
    setEditableRowKeys,
  }));

  return (
    <EditableProTable<DataSourceType>
      columns={columns}
      rowKey="id"
      bordered
      scroll={
        {
          // x: 960,
        }
      }
      size="small"
      value={dataSource}
      onChange={setDataSource}
      recordCreatorProps={{
        newRecordType: "dataSource",
        record: (index) => ({
          id: Date.now(),
        }),
      }}
      editable={{
        type: "multiple",
        editableKeys,
        form: editForm,
        actionRender: (row, config, defaultDoms) => {
          return [defaultDoms.delete];
        },
        onValuesChange: (record, recordList) => {
          
          var after = recordList.map((e, index) => ({
            id: e.id,
            content: e.content,
            option: indexToLetter(index),
            correct: e.correct,
          }));
          setDataSource(after);
        },
        onChange: setEditableRowKeys,
      }}
    />
  );
});
